<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的作业</title>
	<style>
	    .wrap{
		    margin:0;
			padding:0;
			width:248px;
			border:1px solid #ccc;
			margin:100px auto;
		}
		.wrap li{
		    list-style:none;
			width:60px;
			height:70px;
			border:1px solid #ccc;
			float:left;
		}
		.wrap li div{
		    width:25px;
			height:25px;
			margin:10px auto;
		}
		.wrap:after{
		    content:"";
			display:block;
			clear:both;
		}
		.bg1{
			background: url(images/life-service.png) no-repeat 0 0px;
		}
		.bg2{
			background: url(images/life-service.png) no-repeat 0 -25px;
		}
		.bg3{
			background: url(images/life-service.png) no-repeat 0 -50px;
		}
		.bg4{
			background: url(images/life-service.png) no-repeat 0 -75px;
		}
		.bg5{
			background: url(images/life-service.png) no-repeat 0 -100px;
		}
		.bg6{
			background: url(images/life-service.png) no-repeat 0 -125px;
		}
		.bg7{
			background: url(images/life-service.png) no-repeat 0 -150px;
		}
		.bg8{
			background: url(images/life-service.png) no-repeat 0 -175px;
		}
		.bg9{
			background: url(images/life-service.png) no-repeat 0 -200px;
		}
		.bg10{
			background: url(images/life-service.png) no-repeat 0 -225px;
		}
		.bg11{
			background: url(images/life-service.png) no-repeat 0 -250px;
		}
		.bg12{
			background: url(images/life-service.png) no-repeat 0 -275px;
		}
		.bgtext{
		    font-size:14px;
			margin:0;
			text-align:center;
		}
		li:hover .bg1{
			background: url(images/life-service.png) no-repeat -25px 0px;
		}
		li:hover .bg2{
			 background: url(images/life-service.png) no-repeat -25px -25px;
		}
		li:hover .bg3{
			background: url(images/life-service.png) no-repeat -25px -50px;
		}
		li:hover .bg4{
		   background: url(images/life-service.png) no-repeat -25px -75px;
		}
		li:hover .bg5{
			background: url(images/life-service.png) no-repeat -25px -100px;
		}
		li:hover .bg6{
			background: url(images/life-service.png) no-repeat -25px -125px;
		}
		li:hover .bg7{
			background: url(images/life-service.png) no-repeat -25px -150px;
		}
		li:hover .bg8{
			background: url(images/life-service.png) no-repeat -25px -175px;
		}
		li:hover .bg9{
			background: url(images/life-service.png) no-repeat -25px -200px;
		}
		l:hover .bg10{
			background: url(images/life-service.png) no-repeat -25px -225px;
		}
		li:hover .bg11{
			background: url(images/life-service.png) no-repeat -25px -250px;
		}
		li:hover .bg12{
			background: url(images/life-service.png) no-repeat -25px -275px;
		}
		li:hover .bgtext{
		    color:red;
			background-color:yellow;
		    font-size:14px;
			margin:0;
			text-align:center;
		}
	</style>
</head>
<body>
    <ul class="wrap">
	    <li>
		    <div class="bg1"></div>
		    <p class="bgtext">话费</p>
		</li>
		<li>
		    <div class="bg2"></div>
		    <p class="bgtext">飞机</p>
		</li>
		<li>
		    <div class="bg3"></div>
		    <p class="bgtext">电影</p>
		</li>
		<li>
		    <div class="bg4"></div>
		    <p class="bgtext">游戏</p>
		</li>
		<li>
		    <div class="bg5"></div>
		    <p class="bgtext">彩票</p>
		</li> 
		<li>
		    <div class="bg6"></div>
		    <p class="bgtext">购物</p>
		</li>
		<li>
		    <div class="bg7"></div>
		    <p class="bgtext">停车</p>
		</li>
		<li>
		    <div class="bg8"></div>
		    <p class="bgtext">水费</p>
		</li>
		<li>
		    <div class="bg9"></div>
		    <p class="bgtext">银行</p>
		</li>
		<li>
		    <div class="bg10"></div>
		    <p class="bgtext">图书</p>
		</li>
		<li>
		    <div class="bg11"></div>
		    <p class="bgtext">理财</p>
		</li>
		<li>
		    <div class="bg12"></div>
		    <p class="bgtext">信用</p>
		</li>
    </ul>
</body>
</html>